<template>
	<div class="app-home">
		<homeResultVue v-if="!confirmOK" @click="clickStart"></homeResultVue>
		<cardDisplayVue
			v-else
			:index="displayIndex"
			:showIndex="displayAnswerIndex"
			@clickNextCard="clickNextCard"
		></cardDisplayVue>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import homeResultVue from "./homeResult.vue";
import cardDisplayVue from "./cardDisplay.vue";

import { useStore } from "../store/app";
import { mapAllowRange, randomItemFromArr } from "@/utils/common";

const { kanaIndexRange, allowRange } = useStore();

const displayIndex = ref(0);
const displayAnswerIndex = ref(0);
const confirmOK = ref(false);

function clickStart() {
	confirmOK.value = true;
	displayIndex.value = randomItemFromArr(kanaIndexRange);
	displayAnswerIndex.value = randomItemFromArr(mapAllowRange(allowRange));
}

function clickNextCard() {
	displayIndex.value = randomItemFromArr(kanaIndexRange);
	displayAnswerIndex.value = randomItemFromArr(mapAllowRange(allowRange));
}
</script>
